<template>
	<view>
		<cu-custom bgColor="bg-black" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品管理</block>
			<block slot="right">
				<view @tap="add">添加</view>
			</block>
		</cu-custom>
		<view>
			<view class="cu-bar bg-white">
				<view class="action border-title">
					<text class="text-xl text-bold text-black">全部商品</text>
					<text class="bg-gradual-red" style="width:3rem"></text>
				</view>
				<view class="action">
					<!-- <text class="cuIcon-filter"></text>筛选 -->
					共 {{ total }} 件商品
				</view>
			</view>
			<!-- <scroll-view scroll-x class="bg-white nav padding-bottom">
				<view class="flex text-center">
					<view class="cu-item text-gray flex-sub" :class="index==TabCur?'text-black cur':''" v-for="(item,index) in sortList" :key="index" @tap="tabSelect" :data-id="index">
						{{ item.name }}<text class="cuIcon-sort"></text>
						<view v-if="index == 1">
							<picker @change="PickerChange" :value="index" :range="picker">
								<view class="picker">
									{{index>-1?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</scroll-view> -->
			<view class="cu-list menu sm-border">
				<view class="cu-item arrow" v-for="(item,index) in data" :key="index" @tap="handle(item.id)">
					<view class="content">
						<text class="text-black">{{ item.title }}</text>
						<view class="text-sm text-gray">
							<text class="padding-right-sm">{{ item.createTime }}</text>
							<block v-for="(cate,cateIndex) in categoriesList" :key="cateIndex">
								<text v-if="cate.id === item.categoriesId">{{ cate.name }}</text>
							</block>
							
						</view>
					</view>
					<view class="action">
						<view class="text-green text-sm">{{ item.status==1?"上架中":"未上架"}}</view>
					</view>
					<!-- <view class="move">
						<view class="bg-grey" @tap.stop="edit">编辑</view>
						<view class="bg-red" @tap.stop="del">删除</view>
					</view> -->
				</view>
			</view>
			<view class="text-gray text-light text-center margin-xl" v-if="data.length > 0">
				<view class="cu-load load-cuIcon loading" v-show="isLoad">数据加载中，请稍后</view>
				<view class="" v-show="!isLoad" @tap="getlist">点击加载更多</view>
			</view>
		</view>

	</view>
</template>

<script>
	var _this;
	import { getList, add, getDetail, remove, getCategoriesList } from "@/api/content/commodity"
	export default {
		data() {
			return {
				sortList:[
					{
						"name":"时间"
					},
					{
						"name":"分类 - 装修"
					}
				],
				TabCur: 0,
				index: 0,
				picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				//数据分页
				size: 10,
				cur: 0,
				total: 0,
				data: [],
				//数据加载
				isLoad: false,
				//分类名称
				categoriesList:[]
			}
		},
		onLoad() {
			_this = this;
			getCategoriesList().then(res => {
				_this.categoriesList = res.data;
				_this.getlist();
			}).catch(err => {
				console.log()
			})
			
			
		},
		methods: {
			tabSelect(e) {
				_this.TabCur = e.currentTarget.dataset.id;
				_this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			getlist(){
				uni.showLoading({
					title:"数据加载中"
				})
				var size = _this.size;
				_this.cur = _this.cur+1;
				getList(_this.cur, size, {}).then(res => {
					var data = res.data;
					_this.total = data.total
					if(data.records.length === 0){
						uni.showToast({
							title: "没有更多了",
							position: 'bottom',
							icon: "none"
						})
						return false;
					}
					_this.data = _this.data.concat(data.records);
					uni.hideLoading()
				}).catch(err => {
					console.log(err);
					uni.hideLoading()
				})
			},
			PickerChange(e) {
				_this.index = e.detail.value
			},
			
			add(){
				uni.navigateTo({
					url:"/pages/home/commodity/create?catelist="+JSON.stringify(_this.categoriesList)
				})
			},
			edit(id){
				uni.navigateTo({
					url:"/pages/home/commodity/edit?id="+id+"&catelist="+JSON.stringify(_this.categoriesList)
				})
			},
			specs(){
				uni.navigateTo({
					url:"/pages/home/commodity/specs/specs"
				})
			},
			handle(id){
				var that = this;
				uni.showActionSheet({
					title:'商品名称',
				    itemList: ['规格管理', '编辑商品', '商品下架', '删除'],
				    success: function (e) {
						switch(e.tapIndex){
							case 0:
								that.specs();
								break;
							case 1:
								that.edit(id);
								break;
							case 2:
								uni.showToast({
									title:"下架商品",
									icon:"none"
								})
								break;
							case 3:
								uni.showModal({
								    title: '您确认删除商品吗？',
								    content: '同时删除当前商品下的所有规格',
								    success: function (res) {
								        if (res.confirm) {
								            console.log('用户点击确定');
											that.modelFlag = false;
											uni.showToast({
												title:"删除完成"
											})
								        } else if (res.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
								break;
							default:
								uni.showToast({
									title:"删除",
									icon:"none"
								})
								break;
						}
						
				        //console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			}
		}
	}
</script>

<style>

</style>
